<template>
	<view class="p-2 w-100">
		<view v-if="filelist.length <= 0" class="p-2" style="margin:auto;"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无资料"></u-empty></view>
		<view v-else class="bg-white p-2 rounded_15 w-100">
			<view class="flex mb-2" v-for="(item, index) of filelist" :key="item.id">
				<view @tap.stop class="mr-2">
					<checkbox-group @change="checkChange(item, index)">
						<view class="check_box"><checkbox class="check" :value="item.id" :checked="item.check" color="#CF1526" /></view>
					</checkbox-group>
				</view>
				<view class="flex" @click="lookFile(item, index)" style="width: 90%;">
					<view class="imgicon"><image :src="item.file_type_img" mode="aspectFit" class="imgicon"></image></view>
					<text class="tit h6 ml-1">{{ item.title + '.' + item.file_type }}</text>
				</view>
				<!-- MP4/MP3查看 -->
				<u-popup :show="item.fileShow" @close="closePopup(item, index)" mode="center">
					<!-- <view class="" style="max-width: 500rpx;max-height: 400rpx;"> -->
					<video v-if="item.file_type == 'mp4'" :src="item.path || item.img_url || item.img"></video>
					<audio v-else :src="item.path || item.img_url || item.img"></audio>
					<!-- </view> -->
				</u-popup>
			</view>
		</view>
		<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
		<u-popup :show="updataSate" @close="updataSate = false" mode="bottom">
			<view class="up_box p-3">
				<view class="font_24 font-weight-bold c_9 text-center pb-5">严禁上传、传播违法信息，一经发现严格依法处理</view>
				<view class="upload_warp flex justify-around">
					<view class="upload_item text-center">
						<u-upload @afterRead="afterImage" name="image" multiple :maxCount="10" :previewFullImage="true">
							<view class="bg"><image src="@/static/img2/my/pictur.png" mode=""></image></view>
							<text class="py-1 font_24">本地照片</text>
						</u-upload>
					</view>
					<view class="upload_item text-center">
						<u-upload @afterRead="afterVideo" name="video" multiple :maxCount="10" accept="video" :previewFullImage="true">
							<view class="bg"><image src="@/static/img2/my/video.png" mode=""></image></view>
							<text class="py-1 font_24">本地视频</text>
						</u-upload>
					</view>
					<view class="upload_item text-center" @click="uploadChange" v-if="uploadTypeShow">
						<view class="bg"><image src="@/static/img2/my/files.png" mode=""></image></view>
						<text class="py-1 font_24">微信文件</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { filesTesting, filesUserList, filesDel } from '@/api/my/uploadfile.js';
import { baseUrl } from '@/util/api.js';
export default {
	data() {
		return {
			filelist: [],
			checkList: [],
			page: 1, //页数
			suo: true,
			status: 'loadmore',
			updataSate: false,
			uploadTypeShow: true
			// fileSrc: '',
			// fileShow: false
		};
	},
	created() {
		this.getFileList();
	},
	mounted() {
		let that = this;
		uni.$on('onReachBottom', data => {
			// console.log('上拉加载');
			if (this.suo) {
				//定义个小锁，当没有数据时锁住suo
				this.status = 'loading';
				this.page = ++this.page;
				setTimeout(() => {
					this.getFileList();
				}, 1000);
			}
		});
	},
	methods: {
		getFileList() {
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				page: this.page
			};
			filesUserList(msg).then(res => {
				// console.log('文件列表', res);
				if (res.code == 0) {
					res.data.forEach(item => {
						item.fileShow = false;
					});
					this.filelist = res.data;
					if (res.data.length == 0) {
						this.status = 'nomore';
						this.suo = false;
					} else if (res.data.length < 10) {
						this.status = 'nomore';
						this.suo = false;
					} else {
						this.status = 'loadmore';
						this.suo = true;
					}
				} else {
					uni.$u.toast(res.msg);
				}
			});
		},
		// 选择
		checkChange(val, idx) {
			this.$set(this.filelist[idx], 'check', !val.check);
			if (val.check) {
				this.checkList.push(val.id);
			} else {
				let index = this.checkList.map(item => item).indexOf(val.id);
				this.checkList.splice(index, 1);
			}
			this.$emit('delChange', [...new Set(this.checkList)].length);
		},
		// 删除
		checkDel() {
			this.checkList = [...new Set(this.checkList)];
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				ids: this.checkList
			};
			filesDel(msg)
				.then(res => {
					// console.log(res);
					uni.$u.toast(res.msg);
					if (res.code == 0) {
						this.getFileList();
						this.$emit('delAfter');
						this.checkList = [];
					}
				})
				.catch(err => {
					console.log('删除失败', err);
				});
		},
		fileUpload() {
			let that = this;
			uni.getSystemInfo({
				success: res => {
					// console.log(res);
					if (res.platform == 'windows' || res.platform == 'mac' || res.platform == 'devtools') {
						that.uploadTypeShow = false;
					}
				}
			});
			that.updataSate = true;
		},
		uploadChange() {
			let that = this;
			uni.getSystemInfo({
				success: res => {
					// console.log('getSystemInfo,', res);
					if (res.platform == 'windows' || res.platform == 'mac') {
						// uni.$u.toast('PC端暂不支持文件上传，请前往手机端进行上传');
						uni.chooseImage({
							success: chooseImageRes => {
								const tempFilePaths = chooseImageRes.tempFiles;
								// console.log(chooseImageRes);
								tempFilePaths.forEach(item => {
									let fileArr = item.path.split('/');
									// console.log(fileArr[fileArr.length - 1]);
									item.name = fileArr[fileArr.length - 1];
								});
								// console.log(tempFilePaths);
								that.uploadPack(tempFilePaths);
							}
						});
					}
					return;
				}
			});
			wx.chooseMessageFile({
				count: 10,
				type: 'file',
				success(res) {
					let tempFilePaths = res.tempFiles;
					// console.log('==', res, tempFilePaths);
					that.uploadPack(tempFilePaths);
				}
			});
		},
		uploadPack(tempFilePaths) {
			let that = this;
			let files = tempFilePaths.map(item => ({ title: item.name, size: item.size }));
			// console.log(files);
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				data: files
			};
			filesTesting(msg).then(res => {
				if (res.code == 0) {
					uni.showLoading({ title: '上传中……' });
					// console.log('--', res);
					for (var i in tempFilePaths) {
						uni.uploadFile({
							url: baseUrl + '/api/files/uploads',
							filePath: tempFilePaths[i].path || tempFilePaths[i].url,
							name: 'file',
							formData: {
								file: tempFilePaths[i],
								name: tempFilePaths[i].name || '',
								path: tempFilePaths[i].path || tempFilePaths[i].url,
								token: uni.getStorageSync('userInfo').token || ''
							},
							header: {
								'Content-Type': 'multipart/form-data'
							},
							success: resp => {
								let data = JSON.parse(resp.data);
								if (data.code == 0) {
									that.getFileList();
									this.updataSate = false;
								}
								uni.$u.toast(data.msg);
								uni.hideLoading();
							}
						});
					}
				} else {
					console.log('检测错误');
					uni.$u.toast(res.msg);
				}
			});
		},
		lookFile(val, idx) {
			// console.log(val);
			let path = val.path || val.img_url || val.img;
			if (val.file_type == 'mp4' || val.file_type == 'mp3') {
				this.$set(this.filelist[idx], 'fileShow', true);
			} else if (
				val.file_type == 'jpg' ||
				val.file_type == 'png' ||
				val.file_type == 'gif' ||
				val.file_type == 'psd' ||
				val.file_type == 'tif' ||
				val.file_type == 'bmp' ||
				val.file_type == 'webp'
			) {
				uni.previewImage({
					urls: [path],
					success: data => {
						return;
					},
					fail: err => {
						console.log(err.errMsg);
						uni.$u.toast('无法查看');
					}
				});
			} else {
				uni.showLoading({ title: '正在打开资料……' });
				uni.openDocument({
					filePath: path,
					showMenu: true,
					complete: () => {
						uni.hideLoading();
					},
					success: res => {
						console.log('打开文档成功');
					},
					fail: err => {
						console.log(err);
						uni.$u.toast('文件打开失败，无法查看');
					}
				});
			}
		},
		closePopup(val, idx) {
			this.$set(this.filelist[idx], 'fileShow', false);
		},
		// 上传图片类型文件
		afterImage(event) {
			// console.log(event);
			let that = this;
			const tempFilePaths = event.file;
			tempFilePaths.forEach(item => {
				let fileArr = item.url.split('/');
				item.name = fileArr[fileArr.length - 1];
			});
			that.uploadPack(tempFilePaths);
		},
		// 上传视频类型文件
		afterVideo(event) {
			console.log(event);
			let that = this;
			const tempFilePaths = event.file;
			tempFilePaths.forEach(item => {
				let fileArr = item.url.split('/');
				item.name = fileArr[fileArr.length - 1];
			});
			that.uploadPack(tempFilePaths);
		}
	}
};
</script>

<style lang="scss" scoped>
.check_box {
	z-index: 15;
	.check {
		transform: scale(0.7);
	}
}
.tit {
	table-layout: fixed;
	word-wrap: break-word;
	word-break: normal;
	overflow: hidden;
}
.up_box {
	padding-bottom: 100rpx;
	.upload_warp {
		width: 100%;
		height: 200rpx;
		.upload_item {
			width: 125rpx;
		}
		.bg {
			// width: 150rpx;
			// height: 150rpx;
			padding: 33rpx;
			background-color: #dddddd;
			border-radius: 100%;
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
}
.imgicon {
	width: 48rpx;
	height: 52rpx;
}
</style>
